<script setup>
import { ref, computed } from 'vue'
import { useMainStore } from '../pinia.js'
import { DocumentText, Help, Code, Server, Person, Refresh } from '@vicons/ionicons5'

const mainStore = useMainStore()
const activeTab = ref('file-processor')

const emit = defineEmits(['tab-change'])

// 根据用户权限定义可用的标签页
const availableTabs = computed(() => {
  console.log('NavigationTabs - Computing available tabs')
  console.log('mainStore.isAdmin:', mainStore.isAdmin)
  console.log('mainStore.isSystemAdmin:', mainStore.isSystemAdmin)
  console.log('mainStore.isRegularAdmin:', mainStore.isRegularAdmin)
  console.log('mainStore.userRole:', mainStore.userRole)
  console.log('mainStore.canAccessAdminFeatures:', mainStore.canAccessAdminFeatures)
  console.log('mainStore.canAccessDffTest:', mainStore.canAccessDffTest)
  
  const baseTabs = [
    {
      key: 'file-processor',
      label: '文件处理',
      icon: DocumentText,
      description: '上传和处理文件'
    },
    {
      key: 'user-guide',
      label: '使用说明',
      icon: Help,
      description: '查看使用指南'
    }
  ]

  // 如果是管理员或系统权限，添加更新API测试标签页
  if (mainStore.isAdmin) {
    console.log('Adding order update test tab for admin users')
    baseTabs.push({
      key: 'order-update-test',
      label: '更新API测试',
      icon: Refresh,
      description: 'Order/Enquiry更新API测试工具'
    })
  }

  // 如果是管理员或系统权限，添加系统缓存管理标签页
  if (mainStore.isAdmin) {
    console.log('Adding cache management tab for admin users')
    baseTabs.push({
      key: 'cache-management',
      label: '系统缓存管理',
      icon: Server,
      description: '管理系统缓存'
    })
  }

  // 如果是管理员或系统权限，添加用户权限管理标签页
  if (mainStore.canAccessAdminFeatures) {
    console.log('Adding user management tab for admin/system users')
    baseTabs.push({
      key: 'user-management',
      label: '用户权限管理',
      icon: Person,
      description: '管理用户和权限分配'
    })
  }

  // 只有系统权限可以访问DFF API测试
  if (mainStore.canAccessDffTest) {
    console.log('Adding DFF API test tab for system admin')
    baseTabs.push({
      key: 'dff-test',
      label: 'DFF API测试',
      icon: Code,
      description: 'DFF接口测试工具'
    })
  } else {
    console.log('Not adding DFF API test tab - user does not have system admin privileges')
  }

  console.log('Final availableTabs:', baseTabs.length, 'tabs')
  return baseTabs
})

const handleTabChange = (tabKey) => {
  activeTab.value = tabKey
  emit('tab-change', tabKey)
}
</script>

<template>
  <div class="navigation-container">
    <n-card class="nav-card" :bordered="false">
      <div class="user-info compact">
        <n-space align="center" :size="8">
          <n-avatar round size="small">
            {{ mainStore.displayUsername?.charAt(0)?.toUpperCase() || 'U' }}
          </n-avatar>
          <n-text class="username-small">{{ mainStore.displayUsername }}</n-text>
          <n-tag :type="mainStore.isSystemAdmin ? 'error' : mainStore.isRegularAdmin ? 'success' : 'info'" size="small">
            {{ mainStore.userRoleDisplayName }}
          </n-tag>
        </n-space>
      </div>
      
      <n-tabs 
        v-model:value="activeTab" 
        type="line" 
        animated 
        @update:value="handleTabChange"
        class="nav-tabs"
      >
        <n-tab-pane 
          v-for="tab in availableTabs" 
          :key="tab.key" 
          :name="tab.key" 
          :tab="tab.label"
        >
          <template #tab>
            <n-space align="center" :size="6">
              <n-icon size="16">
                <component :is="tab.icon" />
              </n-icon>
              {{ tab.label }}
            </n-space>
          </template>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<style lang="stylus" scoped>
.navigation-container
  margin-bottom: 8px

.nav-card
  .user-info.compact
    padding: 4px 0
    
    .username-small
      font-size: 13px
      font-weight: 500

.nav-tabs
  :deep(.n-tabs-nav)
    padding: 0 4px
    
  :deep(.n-tab)
    padding: 6px 10px
    
  :deep(.n-tabs-tab__label)
    font-weight: 500
    font-size: 13px
</style>